<template>
  <div id="tpl">
    <div class="container" style="text-align: center">
      <van-swipe>
        <van-swipe-item v-for="banner in banners" :key="banner.index">
          <img :src="banner.pic" width="100%">
        </van-swipe-item>
      </van-swipe>

      <van-tabs>
        <van-tab v-for="tab in tabs" :title="tab.title" :key="tab.index">
          <van-row gutter="5" class="goodsList">
            <van-col class="goods" span="8" v-for="goods in tab.goodsList" :key="goods.index">
              <router-link :to="{path:'Goods',query:{'yanxuanId':goods.yanxuan_id}}">
                <img :src="goods.thumb" width="100%">
                <div class="name">{{cutString(goods.name)}}</div>
                <div class="price">¥{{goods.price}}</div>
              </router-link>
            </van-col>
          </van-row>
        </van-tab>
      </van-tabs>
    </div>
    <FooterNav></FooterNav>
  </div>
</template>
<script>
  import axios from 'axios';

  import {Swipe, SwipeItem, Notify} from 'vant';
  import FooterNav from "./Common/FooterNav";
  import url from "../assets/app/url"

  import coreFun from "../assets/core/func"


  const Banners = require("../assets/app/module/Banners");
  const Tabs = require("../assets/app/module/Tabs");

  export default {
    components: {
      FooterNav
    },
    data: function () {
      return {
        banners: [],
        tabs: []
      };
    },
    created: function () {

      this.banners = Banners([{
        "pic": 'https://yanxuan.nosdn.127.net/72d052bfced137a39f0680174f2a709f.jpg?imageView&quality=75&thumbnail=750x0',
        "href": "http://www.baidu.com/"
      }]);
      this.tabs = Tabs([
        {
          "title": "推荐",
          "goodsList": []
        },
        {
          "title": "测试",
          "goodsList": [
            {
              "id": 1,
              "yanxuan_id": 2207,
              "name": "商品1",
              "price": 100,
              "thumb": "http://yanxuan.nosdn.127.net/802ff06dd3ef161db046eeb8db6cb4be.jpg?imageView&thumbn",
              "description": "简介"
            },
            {
              "id": 1,
              "yanxuan_id": 2207,
              "name": "商品1",
              "price": 100,
              "thumb": "http://yanxuan.nosdn.127.net/802ff06dd3ef161db046eeb8db6cb4be.jpg?imageView&thumbn",
              "description": "简介"
            }, {
              "id": 1,
              "yanxuan_id": 2207,
              "name": "商品1",
              "price": 100,
              "thumb": "http://yanxuan.nosdn.127.net/802ff06dd3ef161db046eeb8db6cb4be.jpg?imageView&thumbn",
              "description": "简介"
            }
          ]
        }
      ]);
      axios.get(url.HomeTabs).then(req => {
        this.tabs[0].goodsList = [];
        let goodsList = req.data.info;
        goodsList.forEach(item => {
          let goods = {
            id: item.id,
            yanxuan_id: item.yanxuan_id,
            name: item.name,
            thumb: item.thumb,
            description: item.description,
            price: item.price
          };
          this.tabs[0].goodsList.push(goods)
        });
      });
    },
    methods: {
      cutString: function (title, length = 14) {
        return coreFun.cutStr(title, length)
      }
    }
  }
</script>
<style>
  .goodsList {
    background: #F5F5F5;
  }

  .goods {
    background-color: #fff;
    border-radius: 4px;
    padding: 10px !important;
  }

  .goods img {
    border-radius: 5px;
    /*box-shadow: 0 3px 3px rgba(0, 0, 0, .1);*/
  }

  .goods .name {
    font-size: .32rem;
    color: #333;
  }

  .goods .price {
    font-size: .37333rem;
    color: #b4282d;
  }
</style>
